import {Component, OnInit, Input, Output, OnChanges, SimpleChanges} from '@angular/core';
import {optionsData, seriesData} from './echarts.model';

@Component({
  selector: 'app-compare-echarts',
  templateUrl: './compare-echarts.component.html',
  styleUrls: ['./compare-echarts.component.css']
})
export class CompareEchartsComponent implements OnInit {

  /**
   * echarts实例对象
   *
   * @private
   * @type {*}@memberof CompareEchartsComponent
   */
  private echartsIntance: any = null;

  /**
   * 父组件输入echarts参数
   *
   * @private
   * @type {*}@memberof CompareEchartsComponent
   */
  @Input() legend: {};
  @Input() series: seriesData[];
  @Input() maxPower: number;
  options: optionsData;
  xAxis: object;
  grid: object;
  yAxis: object;
  tooltip: object;
  isFirst: boolean = true;

  constructor() {

  }

  ngOnInit() {
    this.options = {
      tooltip: this.tooltip,
      grid: this.grid,
      xAxis: this.xAxis,
      yAxis: this.yAxis,
      series: this.series
    };
  }

  ngOnChanges(changes: SimpleChanges) {

    if (changes['series'] && changes['series'].currentValue) {
      if (!this.isFirst) {
        this.updateEchart();
      } else {
        this.isFirst = false;
        this.initOptions();
      }
    }

    if (changes['legend'] && changes['legend'].currentValue) {
      this.options.legend = this.legend;
      if (!this.isFirst && this.echartsIntance) {
        this.options.series = this.series;
        this.echartsIntance.setOption(this.options, true);
      } else {
        this.isFirst = false;
        this.initOptions();
      }
    }

    if (changes['maxPower'] && changes['maxPower'].currentValue) {
      this.options.yAxis['max'] = this.maxPower;
      if (!this.isFirst && this.echartsIntance) {
        this.echartsIntance.setOption(this.options, true);
      } else {
        this.isFirst = false;
        this.initOptions();
      }
    }
  }

  /**
   * 初始化图表
   *
   * @memberof CompareEchartsComponent
   */
  initOptions() {
    this.xAxis = {
      type: 'value',
      name: '风速(m/s)',
      splitLine: {
        lineStyle: {
          color: '#1b4268',
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#35789d',
          type: 'solid',
          width: 2,
        },
      },
      max: 25,
      min: 0,
      interval: 2,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#35789d',
          fontSize: 12,
        },
      },
    }
    this.grid = {
      left: '5%',
      right: '12%',
      bottom: '3%',
      containLabel: true
    }
    this.yAxis = {
      type: 'value',
      name: '功率：kW',
      min: 0,
      max: this.maxPower,
      interval: 200,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#43a0b3'
        },
        margin: 15
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#35789d',
          width: 2
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1b4268'
        }
      }
    }
    this.tooltip = {
      trigger: 'axis',
      formatter: (params) => {
        let res = '';
        for (let i = 0; i < params.length; i++) {
          if (params[i].seriesType == 'line') {
            let index = params[i].seriesIndex;
            res += params[i].marker + params[i].seriesName + '&nbsp;&nbsp;' + '风速' + ':' + params[i].value[0] + 'm/s' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '功率' + ':' + params[i].value[1] + 'kW' + '<br/ >';
          }
        }
        return res;
      },
    }
    if (this.options == null) {
      this.options = {
        tooltip: this.tooltip,
        grid: this.grid,
        legend: this.legend,
        xAxis: this.xAxis,
        yAxis: this.yAxis,
        series: this.series
      };
    }
  }

  /**
   * 初始化echarts实例
   *
   *
   * @memberof CompareEchartsComponent
   */
  onChartInit(ec: any) {
    this.echartsIntance = ec;
    this.updateEchart();

  }

  /**
   * 更新echarts实例数据
   *
   *
   * @memberof CompareEchartsComponent
   */
  updateEchart() {
    if (this.echartsIntance != null) {
      this.options.tooltip = this.tooltip;
      this.options.series = this.series;
      this.echartsIntance.setOption(this.options);
      // console.log(this.options)
    }
    ;
  }

}


// WEBPACK FOOTER //
// ./src/app/module/performance/power-compare/compare-echarts/compare-echarts.component.ts
